import React, { Component } from 'react'
import { Modal, Icon, InputItem, Picker, List } from 'antd-mobile'

export default class Dashboard extends Component {
  render() {
    return (
      <div className={`rt-dashboard-container`}>
        <div className={`rt-row-box`}>
          <div className={`rt-grid-box`}>
            <img alt="left" src={require('static/images/left.png')} />
          </div>
          <div className={`rt-grid-box`}>
            <img alt="middle" src={require('static/images/middle.png')} />
          </div>
          <div className={`rt-grid-box`}>
            <img alt="right" src={require('static/images/right.png')} />
          </div>
          {
            Array(0).fill(1).map(v => (
              <div key={Math.random()} className={`rt-grid-box`}></div>
            ))
          }
          <div className={`rt-text-box`}>
            <span>用户</span>
            <span>课程</span>
            <span>反馈</span>
          </div>
        </div>

        <Modal
          className={`rt-user-modal`}
          visible
          closable={false}
        >
          <div className={`rt-top-nav-box`}>
            <Icon type="left" />
            <span>用户</span>
          </div>
          <div className={`rt-row-box`}>
            <span>个人信息采集</span>
            <Icon type="right" />
          </div>
        </Modal>
        <Modal
          className={`rt-user-modal`}
          visible={false}
          closable={false}
        >
          <div className={`rt-top-nav-box`}>
            <Icon type="left" />
            <span>课程</span>
          </div>
          <div className={`rt-row-box`}>
            <span>班级报名</span>
            <Icon type="right" />
          </div>
          <div className={`rt-row-box`}>
            <span>订单处理</span>
            <Icon type="right" />
          </div>
          <div className={`rt-row-box`}>
            <span>留言采集</span>
            <Icon type="right" />
          </div>
          <div className={`rt-row-box`}>
            <span>问卷填写</span>
            <Icon type="right" />
          </div>
        </Modal>
        <Modal
          className={`rt-user-modal rt-profile-modal`}
          visible={false}
          closable={false}
        >
          <div className={`rt-top-nav-box`}>
            <Icon type="left" />
            <span>个人信息</span>
          </div>
          <InputItem
            placeholder="请输入您的姓名"
            className={`rt-input-box`}
          />
          <InputItem
            placeholder="请输入您的手机号码"
            className={`rt-input-box`}
          />
          <InputItem
            placeholder="请输入您的邮箱"
            className={`rt-input-box`}
          />
          <InputItem
            placeholder="请输入您的公司名称"
            className={`rt-input-box`}
          />
          <InputItem
            placeholder="请输入您的职位"
            className={`rt-input-box`}
          />
          <div className={`rt-main-button`}>保 存</div>
        </Modal>
        <Modal
          className={`rt-user-modal rt-profile-modal`}
          visible={!false}
          closable={false}
        >
          <div className={`rt-top-nav-box`}>
            <Icon type="left" />
            <span>班级报名</span>
          </div>
          <Picker
            extra="请选择课程"
            cols={1}
          >
            <List.Item
              arrow="down"
            />
          </Picker>
          <Picker
            extra="请选择开课班级"
            cols={1}
          >
            <List.Item
              arrow="down"
            />
          </Picker>
          <InputItem
            placeholder="开课日期"
            className={`rt-input-box`}
          />
          <div className={`rt-main-button`}>报 名</div>
        </Modal>
      </div>
    )
  }
}